<template>
<div class="main" ref="mainRef">
   <ThreeScene :width="size.width" :height="size.height" v-if="size.width && size.height" /> 
</div>
</template>

<script setup>
import { reactive,ref,onBeforeMount,onBeforeUnmount, onMounted } from "vue";
import ThreeScene from "../components/ThreeScene.vue";
//#region 变量定义
const props = defineProps([]);
const emits = defineEmits([]);
const obj = reactive({});
const mainRef = ref(null);
const size=ref({width:0,height:0})

//#endregion 变量定义

//#region 生命周期
onMounted(() => {
 window.addEventListener('resize',onResize)
 onResize()
});

onBeforeUnmount(() => {

});
//#endregion 生命周期
//#region Function
const onResize=()=>{ 
    size.value.width=mainRef.value.clientWidth
    size.value.height=mainRef.value.clientHeight
}
//#endregion Function
</script>

<style scoped  lang="less">
.main{
    position: absolute;
    left: var(--aside-width);
    top:var(--header-height);
    display: flex;
    width: calc(100vw - var(--aside-width));
    height: calc(100vh - var(--header-height));
}
</style>